<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-07-10 09:19:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-15 10:07:21
 * @FilePath: \cip-admin\src\pages\company\information\point-major\hazard-source\components\handler.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { createVNode } from "vue";

import { useAsync } from "@/hooks/use-async";
import { exportTableByVNode } from "@/utils/table-util";

import { injectState } from "../state";
import DetailDialog from "./detail-dialog.vue";
import SheetItem from "./sheet-item.vue";

defineOptions({ name: "Headler" });

const { selectedList } = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

//导出
const { execute: exportTable, isLoading: exportLoading } = useAsync(
	async () => {
		const vnode = createVNode(ElTable, { data: selectedList.value }, () =>
			h(SheetItem),
		);
		await exportTableByVNode(vnode, "export.xls");
	},
);
</script>

<template>
	<DetailDialog ref="detailDialogRef" />
	<div flex="~ justify-between">
		<div flex="~">
			<el-button type="primary" @click="detailDialogRef?.trigger('add')">
				<template #icon>
					<el-icon class="i-custom:add" />
				</template>
				新建
			</el-button>
		</div>
	</div>
</template>
